<template>
  <maincontainer>
    <div class="w-full h-full bg-white">
      <div  class="w-full bg-white">
        <div class="titletext px-5 text-left mt-3">账号信息</div>
        <div class="w-full h-50px border-b flex justify-between items-center px-5">
          <span>头像</span>
          <div class='flex items-center'>
            <div class='group w-50px h-50px juzhong1 relative rounded-full overflow-hidden mx-2' v-if='userInfo.touxiang'>
              <n-avatar
                round
                :src="userInfo.touxiang"
              />
              <div class='absolute inset-0 juzhong1 hidden bg-white bg-opacity-50 group-hover:flex'>
                <n-icon size='20'>
                  <Delete class='cursor-pointer select-none hover:text-red-400' @click='removertouxiang'></Delete>
                </n-icon>
              </div>
            </div>
            <div class='group w-50px h-50px juzhong1 relative rounded-full overflow-hidden mx-2'  v-else>
              <n-avatar
                round
                :src="touxiang"
              />
            </div>
            <n-button size='small' type='info' @click='startUpload'>上传</n-button>
            <upimg class='hidden' ref='upimgref' @changefile='upimgsuccess'></upimg>
          </div>
        </div>
        <div class="w-full h-50px border-b flex justify-between items-center px-5">
          <span>密码</span>
          <div>
            <n-button text type="info" @click="changepwdfunc">设置密码</n-button>
          </div>
        </div>
        <div class="w-full h-50px border-b flex justify-between items-center px-5 ">
          <span>手机号码</span>
          <div>
            <span class="mr-5">15500001111</span>
            <n-button text type="info" @click="changemobilefunc">修改手机号</n-button>
          </div>
        </div>
        <div class="w-full h-50px border-b flex justify-between items-center px-5 ">
          <span>邮箱</span>
          <div>
            <span class="mr-5">15500001111@163.com</span>
            <n-button text type="info" @click="changeemailfunc">修改邮箱</n-button>
          </div>
        </div>
        <div class="w-full h-50px border-b flex justify-between items-center px-5 ">
          <span>QQ账号</span>
          <div>
            <span class="mr-5">15500001111</span>
            <n-button text type="info" @click="changeqqfunc">修改QQ账号</n-button>
          </div>
        </div>
        <div class="w-full h-50px border-b flex justify-between items-center px-5 ">
          <span>微信</span>
          <div>
            <span class="mr-5">15500001111</span>
            <n-button text type="info" @click="changeweixinfunc">修改微信账号</n-button>
          </div>
        </div>
        <div class="w-full h-50px border-b flex justify-between items-center px-5 ">
          <span>其他三方账号</span>
          <div>
            <n-button text type="info" @click="changeotherfunc">绑定/解绑</n-button>
          </div>
        </div>
      </div>
    </div>
    <changepwdModel ref="changepwdref" @close="shuaxin"></changepwdModel>
    <changeqqModel ref="changeqqref" @close="shuaxin"></changeqqModel>
    <changeweixinModel ref="changeweixinref" @close="shuaxin"></changeweixinModel>
    <changemobileModel ref="changemobileref" @close="shuaxin"></changemobileModel>
    <changeotherModel ref="changeotherref" @close="shuaxin"></changeotherModel>
    <changeemailModel ref="changeemailref" @close="shuaxin"></changeemailModel>
  </maincontainer>
</template>

<script setup name="Workerinfo" lang="ts">
import changepwdModel from "./changepwd.vue"
import changeqqModel from "./changeqq.vue"
import changeweixinModel from "./changeweixin.vue"
import changemobileModel from "./changemobile.vue"
import changeotherModel from "./changeother.vue"
import changeemailModel from "./changeemail.vue"
import { useUserInfo } from '../../../store/moduls/userinfo'
import {useRoute} from "vue-router"
import http from "@/request/request"
import {inject, ref} from "vue"
import {useMessage} from "naive-ui"
import {Delete} from "@vicons/carbon"
const route = useRoute()
const userInfo = useUserInfo()
const message = useMessage()
const upimgref = ref<any>(null)
const changepwdref = ref<any>(null)
const changeqqref = ref<any>(null)
const changeweixinref = ref<any>(null)
const changemobileref = ref<any>(null)
const changeotherref = ref<any>(null)
const changeemailref = ref<any>(null)
// 默认的头像
const touxiang = ref("http://101.43.194.47:9000/file/yuangong.webp")


const upimgsuccess = (filelist:Array<any>)=>{
  if(filelist.length===0)return;
  const url = filelist[0].url
  const data = {
    desc:userInfo.desc,
    touxiang:url,
  }
  http.changeinfo(data).then((res:any)=>{
    upimgref.value.removefile()
    if(res.data.code===0){
      message.success("头像修改成功")
      userInfo.changeimgdesc(res.data.data)
    }else{
      message.success(res.data.error.toString())
    }
  }).catch((err:any)=>{
    upimgref.value.removefile()
    message.success(err)
  })
}
const startUpload=()=>{
  upimgref.value.init()
}

// 删除当前头像
const removertouxiang=()=>{
  const data = {
    desc:userInfo.desc,
    touxiang:"",
  }
  http.changeinfo(data).then((res:any)=>{
    if(res.data.code===0){
      message.success("头像修改成功")
      userInfo.changeimgdesc(res.data.data)
    }else{
      message.success(res.data.error.toString())
    }
  }).catch((err:any)=>{
    message.success(err)
  })
}
// 点击修改密码
const changepwdfunc=()=>{
  changepwdref.value!.init("edit")
}
// 点击修改qq
const changeqqfunc=()=>{
  changeqqref.value!.init("edit")
}
// 点击修改微信
const changeweixinfunc=()=>{
  changeweixinref.value!.init("edit")
}
// 点击修改手机
const changemobilefunc=()=>{
  changemobileref.value!.init("edit")
}
// 点击修改邮箱
const changeemailfunc=()=>{
  changeemailref.value!.init("edit")
}
// 点击第三方关联账号
const changeotherfunc=()=>{
  changeotherref.value!.init("edit")
}

// 刷新当前页信息
const shuaxin=(type)=>{
  console.log("刷新",type)
}

const zhucefunc:Function|undefined = inject("zhuceshuaxinfunc")
// 初始化函数
const init = () => {

}

// 初始化区域
init()
zhucefunc && zhucefunc({[route.name!.toString()]:init})
</script>

<style scoped>

</style>
